<script setup lang="ts">
import { addBuild, getBuildList } from '@/apis/park';
import type { Addbuild, BuildData, buildingRes, Row } from '@/types/Park';
import service from '@/utils/reuqest';
import type { FormInstance, FormRules } from 'element-plus';
import { onMounted, ref } from 'vue';

const params=ref<buildingRes>({
  page:1,
  pageSize:5,
  name:''
})
const List= ref<Row[]>([]);
const total=ref<number>()
const buildlist=async ()=>{
  const res=await getBuildList(params.value)
  console.log('res',res);
  List.value=res.data.rows
  total.value=res.data.total
  }

const StatusMap=new Map([
  [0, '空置中'],
  [1, '租赁中'],
]);
onMounted(()=>{
  buildlist()
})
const searchBuild=()=>{
  buildlist()
  params.value.page=1
}
const dialogVisible=ref(false)
const addbuild=ref<Addbuild>({
  area: null,
  floors: null,
  name: '',
  propertyFeePrice: null
})
const addbuildRef=ref<FormInstance>()
const addRules=ref<FormRules<Addbuild>>({
  area: [
    { required: true, message: '请输入面积', trigger: 'blur' },
  ],
  floors: [
    { required: true, message: '请输入楼层', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入楼宇名称', trigger: 'blur' },
  ],
  propertyFeePrice: [
    { required: true, message: '请输入物业费单价', trigger: 'blur' },
  ]
})
const addBuilding=async ()=>{
  addbuildRef.value?.validate(async (res)=>{
    if(res){
    const res= await addBuild(addbuild.value)
     dialogVisible.value=false
     console.log('res',res);
     buildlist()
    }
  })
}
const editBuild=async (id:number)=>{
  dialogVisible.value=true
  const res=await service.get(`/park/building/${id}`)
  addbuild.value={
    area:res.data.area,
    floors:res.data.floors,
    name:res.data.name,
    propertyFeePrice:res.data.propertyFeePrice
  }
}
</script>


<template>
  <div class="park-building-page">
    <div class="search-container">
      <div class="search-label">楼宇名称：</div>
      <el-input clearable placeholder="请输入内容" v-model="params.name" class="search-main" />
      <el-button type="primary" v-model="params.name" @click="searchBuild">查询</el-button>
    </div>
    <el-button type="primary" @click="dialogVisible=true">添加楼宇</el-button>
    <!-- 表格区域 -->
    <el-table :data="List">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="name" label="楼宇名称"></el-table-column>
      <el-table-column prop="floors" label="层数"></el-table-column>
      <el-table-column prop="area" label="在管面积(m²)"></el-table-column>
      <el-table-column prop="propertyFeePrice" label="物业费(元/m²)"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <div>{{ StatusMap.get(row.status) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="{ row }">
          <el-button text type="primary"  @click="editBuild(row.id)">编辑</el-button>
          <el-button text >删除</el-button>
        </template>
         </el-table-column>
    </el-table>
    <el-pagination
        :total="total"
        :page-sizes="[2, 3, 4, 5]"
        layout="total,sizes, prev, pager, next,jumper"
        v-model:current-page="params.page"
        v-model:page-size="params.pageSize"
        @change="buildlist"
      />
      <el-dialog  title="添加楼宇" width="500" v-model="dialogVisible">
    <el-form label-position="top" style="width: 300px;margin-left: 70px;" :model="addbuild" :rules="addRules" ref="addbuildRef">
      <el-form-item label="楼宇名称" prop="name" >
        <el-input placeholder="请输入楼宇名称" v-model="addbuild.name" />
      </el-form-item>
      <el-form-item label="楼宇层数" prop="floors" >
        <el-input placeholder="请输入楼宇层数" v-model="addbuild.floors"/>
      </el-form-item>
      <el-form-item label="在管面积" prop="area">
        <el-input placeholder="请输入在管面积" v-model="addbuild.area"/>
      </el-form-item>
      <el-form-item label="物业费" prop="propertyFeePrice" >
        <el-input placeholder="请输入物业费" v-model="addbuild.propertyFeePrice"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" >
        <el-button >取消</el-button>
        <el-button type="primary" @click="addBuilding">添加</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.park-building-page {
  height: 100%;
  padding: 20px;
}
.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 80px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.el-button {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
